<script setup lang="ts">
  import { storeToRefs } from 'pinia';
  import { useDesktopStore } from '@vben/stores';
  import { Card as ACard, Select as ASelect } from 'ant-design-vue';

  const { taskbarIconAlign, taskbarPosition } = storeToRefs(useDesktopStore());
  const { taskbarPositionChange } = useDesktopStore();
</script>

<template>
  <div class="p-5">
    <a-card class="mb-5" title="任务栏图标对齐方式" :headStyle="{ borderBottom: 'none' }">
      <template #extra>
        <a-select
          v-model:value="taskbarIconAlign"
          style="width: 120px"
          :options="[
            { value: 'center', label: '居中' },
            { value: 'left', label: '左对齐' },
          ]"
        >
        </a-select>
      </template>
    </a-card>
    <a-card class="mb-5" title="任务栏位置" :headStyle="{ borderBottom: 'none' }">
      <template #extra>
        <a-select
          :value="taskbarPosition"
          style="width: 120px"
          :options="[
            { value: 'bottom', label: '下' },
            { value: 'top', label: '上' },
          ]"
          @change="taskbarPositionChange"
        >
        </a-select>
      </template>
    </a-card>
  </div>
</template>

<style scoped></style>
